<template>
	
	<div class="edit-model-wrap" :style="{ width: width + 'px' }">
		<button class="resize-button" @click="OnResizeClick">
			<el-icon>
				<ArrowRightBold v-show="isExpand" />
				<ArrowLeftBold v-show="!isExpand" />
			</el-icon>
		</button>
		
		<div class="edit-right-pane">
			
			<div class="edit-tab-pane">
				<div class="tab-header">
					<div class="tab">
						<div class="tab-icon">
							<Notebook/>
						</div>
					</div>
				</div>
				<div class="tab-body">
					<SceneTree />
				</div>
				
			</div>
			
			<div class="edit-setting-pane" id="obj-setting">
				<div class="header" @mousedown="dragEagle">
				</div>
				<div class="body">
					
					<ul>
						<Transform ref="transformObj"></Transform>
						<Label ></Label>
						<IconForImg/>
					</ul>
					
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	
	import Transform from "./transform/Transform.vue"
	import Label from "./label/Label.vue"
	import IconForImg from "./IconForImg/IconForImg.vue"
	import SceneTree from "./sceneTree/SceneTree.vue"
	
	
	import {
	  ArrowRightBold,ArrowLeftBold,Notebook,Download,Upload,ArrowRight,ArrowDown,CaretRight,CaretBottom,Unlock,Lock
	} from '@element-plus/icons-vue'
	
	import { ref } from 'vue'
	const paneWidth=350;
	const isExpand = ref(true)
	
	const width = ref(paneWidth)
	
	const OnResizeClick=()=>{
		if(width.value==paneWidth){
			isExpand.value=false
			width.value=0;
		}else{
			width.value=paneWidth;
			isExpand.value=true
		}
	}
	
	
	
	const dragEagle= (e)=> {
		var targetDiv = document.getElementById('obj-setting'); 
		var targetDivHeight = targetDiv.offsetHeight;
		var startX = e.clientX;
		var startY = e.clientY;
		document.onmousemove  = function (e) {
			e.preventDefault();
			var distY = Math.abs(e.clientY - startY);
			//往上方拖动：
			if (e.clientY < startY) {
				targetDiv.style.height = targetDivHeight + distY + 'px';
			}
			//往下方拖动：
			if (e.clientX < startX && e.clientY > startY) {
				targetDiv.style.height = (targetDivHeight - distY) + 'px';
			}
			
			if (parseInt(targetDiv.style.height) >= 600) {
				targetDiv.style.height = 600 + 'px';
			}
			
			if (parseInt(targetDiv.style.height) <= 350) {
				targetDiv.style.height = 350 + 'px';
			}
		}
		// 鼠标松开事件
		document.onmouseup = function (evt) {
			document.onmousemove = null;
			document.onmouseup = null;
		};
	}
	

</script>

<style  scoped>
	
	.edit-model-wrap{
		width: 21.875rem;
		background: red;
		float: right;
		z-index: 0.625rem;
		height: 100%;
		border-left: 1px solid rgb(24, 24, 27);
		background: #2b2c2f;
		

		.resize-button {
		    cursor: pointer;
		    padding: 1px;
		    border: 1px solid rgb(0, 128, 255);
		    color: rgb(212, 212, 212);
		    border-radius: inherit;
		    font-size: 12px;
		    box-sizing: border-box;
		    background: linear-gradient(270deg, rgba(21, 98, 240, 0.45), rgba(14, 31, 58, 0.45));
		    height: 41px;
		    width: 17px;
			position: relative;
			left: 11px;
			top: 40%;
		    transform: translate(-170%, 50%);
		}
		.edit-right-pane{
			display: -webkit-flex;
			display: flex;
			-webkit-flex-direction: column;
			flex-direction: column;
			height: 100%;
			margin-top: -40px;
			>.edit-tab-pane{
				flex: 1;
				>.tab-header{
					align-items: center;
					width: 100%;
					height:35px;
					display: flex;
					-webkit-flex-direction: row;
					flex-direction: row;
					>.tab{
						width: 3.4375rem;
						height: 2rem;
						border-radius: 0;
						border-top: 2px solid #0080ff;
						color: linear-gradient(#26ffff,#0080ff);
						background-color: #313f50;
						padding: 4px 5px 5px 20px;;
						>.tab-icon{
							width: 16px;
							>svg{
								background: -webkit-gradient(linear,left top,left bottom,from(#26ffff),to(#0080ff));
								background: linear-gradient(180deg,#26ffff,#0080ff); 
								-webkit-background-clip: text;
								color: #0080ff;
							}
						}
					}
				}
				>.tab-body{
					flex: 1;
					display: flex;
					-webkit-flex-direction: column;
					flex-direction: column;
					>.obj-tree{
						flex: 1;
						background-color: #2b2c2f;
						height: 100%;
						
						>.title-wrap{
							display: -webkit-box;
							display: -ms-flexbox;
							display: flex;
							-webkit-box-pack: justify;
							-ms-flex-pack: justify;
							justify-content: space-between;
							-webkit-box-align: center;
							-ms-flex-align: center;
							align-items: center;
							width: 100%;
							height: 34px;
							background-color: #36373a;
							border-bottom: 1px solid #18181b;
							border-top: 1px solid #515664;
							color: #ccc;
							font-size: 14px;
							>span{
								border-left-width: 3px!important;
								padding-left: 8px!important;
								height: 16px;
								line-height: 17px;
								font-size: 13px;
								color: #ccc;
								-webkit-box-sizing: border-box;
								box-sizing: border-box;
								white-space: nowrap;
								border-left: 2px solid #0080ff;
								margin-left: 8px;
								padding-left: 3px;
							}
							>div{
								float: right;
								margin-top: -1px;
								>button{
								   width: 1.4375rem;
								   height: 1.875rem;
								   margin-right: 0.3125rem;
								   background: transparent;
								   color: #ccc;
								}
							}
						}
						
					}
				}
			}
			
			>.edit-setting-pane{
				height: 350px;
				display: flex;
				-webkit-flex-direction: column;
				flex-direction: column;
				>.header{
					left: 0;
					width: 100%;
					cursor: ns-resize;
					height: 0.5rem;
					background: #2b2c2f;
					border-top: 1px solid rgb(24, 24, 27);
					border-bottom: 1px solid rgb(24, 24, 27);
					bottom: 0.0625rem;
					background-image: url("/src/assets/icons/shenglvehao.svg");
					background-position-y: center;
					background-repeat: no-repeat;
					background-position-x: center;
					background-size: 25px;
				}
				>.body{
					flex: 1;
					margin-top: 0.0625rem;
					background: #2b2c2f;
					overflow: auto;
					>ul{
						>li{
							list-style: none;
							float: left;
							cursor: pointer;
							color: #ccc;
							font-size: 0.875rem;
							display: flex;
							-webkit-flex-direction: column;
							flex-direction: column;
							width: 100%;
						}
					}
				}
			}
			
			
			
		}
		
	}
	
	
	
	::-webkit-scrollbar {
			width: 0rem; /*对垂直流动条有效*/
			height: 0rem; /*对水平流动条有效*/
		}
	
		/*定义滚动条的轨道颜色、内阴影及圆角*/
		::-webkit-scrollbar-track{
			-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
			background-color: rosybrown;
			border-radius: 0px;
		}
	
	
	/*定义滑块颜色、内阴影及圆角*/
		::-webkit-scrollbar-thumb{
			border-radius: 0px;
			-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
			background-color: #E8E8E8;
		}
	
		/*定义两端按钮的样式*/
		::-webkit-scrollbar-button {
			display: none;
		}
	
		/*定义右下角汇合处的样式*/
	::-webkit-scrollbar-corner {
			display: none;
		}
</style>